<script lang="ts" setup>
import { onMounted, onUnmounted } from "vue";
import LoginInput from "./LoginInput.vue";
import { message } from "ant-design-vue";
const [messageApi, contextHolder] = message.useMessage();

onMounted(() => {
  document.getElementsByTagName("html")[0].style.fontSize = "16px";
});

onUnmounted(() => {
  document.getElementsByTagName("html")[0].removeAttribute("style");
});

const form = {
  account: {
    value: "",
    tip: "账号",
  },
  password: {
    value: "",
    tip: "密码",
  },
};

const submit = () => {
  if (form.account.value === "") {
    messageApi.warning("请检查" + form.account.tip);
    return;
  }
  if (form.password.value === "") {
    messageApi.warning("请检查" + form.password.tip);
    return;
  }

  messageApi.success("登录成功!");

  setTimeout(() => {
    location.href = "#/console";
  }, 1000);
};
</script>
<template>
  <div
    class="w-full h-full flex justify-center flex-col items-center bg-slate-50 bg-grid rounded-4xl"
  >
    <div class="flex flex-col justify-center items-center">
      <div class="w-40 mb-5"><img src="/logo.svg" alt="logo" /></div>
      <div
        class="w-105 pb-15 rounded-md shadow-xl shadow-grey-800 bg-white flex flex-col items-center pl-10 pr-10"
      >
        <h2 class="text-2xl text-center mt-10 mb-10">登录</h2>
        <LoginInput
          class="mb-6"
          placeholder="请输入账号"
          @update="(e) => (form.account.value = e)"
        />

        <LoginInput
          placeholder="请输入密码"
          type="password"
          @update="(e) => (form.password.value = e)"
        />

        <div class="flex items-center mt-5 justify-between w-full">
          <p class="flex items-center mb-0">
            <span class="text-sm">没有账号？去</span>
            <a class="text-sm text-green-500 cursor-pointer" href="#/register">
              注册
            </a>
          </p>
          <a class="text-sm text-green-500 cursor-pointer" href="#/">首页</a>
        </div>

        <input
          type="button"
          value="登录"
          @click="submit"
          class="w-40 h-9 rounded mt-10 text-base text-white bg-green-600 border-0 cursor-pointer"
        />
      </div>
    </div>
  </div>

  <contextHolder />
</template>
<style lang="scss" scoped>
// .bg-grid {
//   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
// }
</style>
